<!-- 
 * @description: 表格-操作-按钮组件
 * @fileName: BTableOperation.vue 
 * @author: xp 
 * @date: 2023-07-20 13:36:46
-->
<template>
  <div class="b-table-operation">
    <template v-if="!showBtnList.length">-</template>
    <template v-else-if="showBtnList.length <= 3">
        <template v-for="(item, index) in showBtnList">
            <div :class="['btn-item fontTheme', { 'btn-width1': item.name.length == 2 }, { 'forbid': item.forbid || false }, { 'btn-width2': item.name.length == 3 }]" @click="handleClick(item)" :key="index"><span>{{ item.name }}</span></div>
        </template>
    </template>
    <template v-else>
        <template v-for="(item, index) in showBtnList">
            <div :class="['btn-item fontTheme', { 'btn-width1': item.name.length == 2 }, { 'forbid': item.forbid || false }, { 'btn-width2': item.name.length == 3 }]" @click="handleClick(item)" :key="index" v-if="index < 2"><span>{{ item.name }}</span></div>
        </template>
        <el-dropdown @command="handleClick">
            <div class="btn-more fontTheme"><span>查看更多<i class="el-icon-arrow-down"></i></span></div>
            <el-dropdown-menu slot="dropdown">
                <template v-for="(item, index) in showBtnList">
                    <el-dropdown-item v-if="index >= 2" :key="index" :command="item">{{item.name}}</el-dropdown-item>
                </template>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
  </div>
</template>
<script>
export default {
  name: 'BTableOperation',
  props: {
    list: {
        type: Array,
        default: () => [
        /**
         * name: 按钮展示的名称
         * btnCode: 按钮权限  不传则默认显示  传入则会校验
         * btnClick: 点击按钮执行的方法
         * */ 
        // {
        //         name: '测试',
        //         btnCode: '/inf-bridge-service/back/classify/edit',
        //         btnClick: () => { console.log(111); }
        //     },
        ]
    }
  },
  data () {
    return {
        // list: [
        //     {
        //         name: '测试',
        //         btnCode: '/inf-bridge-service/back/classify/edit',
        //         visible: false, // 是否显示
        //         btnClick: () => { console.log(111); }
        //     },
        //     {
        //         name: '测试1',
        //         btnCode: '/inf-bridge-service/back/specification/edit',
        //         visible: false, // 是否显示
        //         btnClick: () => {console.log(222);}
        //     },
        //     {
        //         name: '测试2',
        //         btnCode: '/inf-bridge-service/back/specification/edit',
        //         visible: false, // 是否显示
        //         btnClick: () => {console.log(3333);}
        //     },
        //     {
        //         name: '测试按钮',
        //         btnCode: '/inf-bridge-service/back/specification/edit',
        //         visible: false, // 是否显示
        //         btnClick: () => {console.log(444);}
        //     },
        //     {
        //         name: '你商家地址',
        //         btnCode: '/inf-bridge-service/back/specification/edit',
        //         visible: false, // 是否显示
        //         btnClick: () => {console.log(444);}
        //     }
        // ],
        showBtnList: []
    }
  },
  watch: {
    list:{ // 动态监听list长度
        handler(newV, oldV) {
            this.getShowList(newV)
        },
        deep: true
    } 
  },
  created () {
    this.getShowList(this.list)
  }, 
  mounted() {
  },
  methods: {
    getShowList(list) {
        // 按钮权限校验
        let arr = []
        const loginCodes = JSON.parse(localStorage.getItem("permission"));
        // if (!loginCodes || loginCodes.length < 1) return;
        list.map((y) => {
            if (!y.btnCode) { // 无需按钮权限的按钮
                y.visible = true;
                arr.push(y)
            } else { // 有按钮权限的按钮
                let index = loginCodes.findIndex(item => item == y.btnCode)
                if (index != -1) {
                    y.visible = true;
                    arr.push(y)
                }
            }
        });
        this.showBtnList = arr
    },
    // 按钮点击
    handleClick(item) {
        if (!item.forbid) { // 判断是否禁止点击
            if (item.btnCode) {
                localStorage.setItem('perm', item.btnCode)
            }
            item.btnClick && item.btnClick()
        }
    }
  }
}
</script>
<style lang="scss" scoped>
.b-table-operation{
    display: flex;
    align-items: center;
    justify-content: center;
    .btn-item{
        position: relative;
        // width: 96px;
        text-align: center;
        padding: 0 16px;
        &:first-of-type::before{
            width: 0;
        }
        &::before{
            position: absolute;
            left: 0;
            top: 10%;
            bottom: 10%;
            width: 1px;
            background-color: #EBEEF5;
            content: '';
        }
        >span{
            white-space: nowrap;
            cursor: pointer;
        }
    }
    .btn-more{
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 16px;
        &::before{
            position: absolute;
            left: 0;
            top: 10%;
            bottom: 10%;
            width: 1px;
            background-color: #EBEEF5;
            content: '';
        }
        >span{
            white-space: nowrap;
            cursor: pointer;
            >i {
                font-size: 10px;
                margin-left: 4px;
            }
        }
    }
}
.btn-width1{
    // width: 68px !important;
    width: auto !important;
    padding: 0 16px;
}
.btn-width2{
    padding: 0 16px;
    width: auto !important;
    // width: 82px !important;
}
.forbid{
    color: rgba($color: #000000, $alpha: .25) !important;
}
</style>